<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea id="text" style="width:500px;height:500px"></textarea> <br>
<input type="text" id="msg"><button onclick="send()">发送</button>
<button onclick="closeConn()">断开连接</button>

<script>
    var btn = document.querySelector("button");
    var txt = document.querySelector("textarea");
    var inp = document.querySelector("input");

    var ws = new WebSocket("ws://localhost:10000/ws/123");

    function send(){
        ws.send(inp.value);
        txt.value += inp.value + "\n";
    }

    function closeConn(){
        ws.close();
    }

    ws.onopen = function (){
        txt.value += "和服务器已连接\n";
    }
    ws.onmessage = function (msg){
        txt.value += msg.data + "\n";
    }
    ws.onclose = function (){
        txt.value += "和服务器已断开连接\n";
    }
    ws.onerror = function (){
        txt.value += "和服务器连接出错\n";
    }
</script>

</body>
</html>